<template>
	<div class="login-container">
		<div class="wrap">
			<div class="left">
				<img src="./../../assets/img/loginLeft.jpg" />
			</div>
			<div class="right">
				<div class="logo">
					<!-- <img src="~assets/img/login-logo-hb.png" /> -->
					<!--          <img src="./../../assets/img/login-logo-hb.png" />-->
				</div>
				<div class="title">{{ title }}</div>
				<el-form
					ref="ruleFormRef"
					:model="ruleForm"
					:rules="rules"
					status-icon
					label-position="left"
					label-width="0px"
					class="demo-ruleForm login-page"
				>
					<el-form-item prop="username">
						<el-input
							v-model="ruleForm.username"
							type="text"
							auto-complete="off"
							placeholder="请输入用户名"
							prefix-icon="el-icon-s-custom"
						></el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input
							v-model="ruleForm.password"
							type="password"
							auto-complete="off"
							placeholder="请输入密码"
							prefix-icon="el-icon-lock"
						></el-input>
					</el-form-item>
					<el-form-item style="width: 100%">
						<el-button
							type="primary"
							style="width: 100%"
							:loading="logining"
							@click="handleSubmit(ruleFormRef)"
							>登录</el-button
						>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
import { postData } from "./../../http/request.js";
import { reactive, toRefs, ref } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Refresh from "./../../utils/refreshToken.js";

export default {
	// eslint-disable-next-line vue/multi-word-component-names
	name: "Login",

	setup() {
		let data = reactive({
			logining: false,
			title: "平台登录",
			btnText: "登录",
		});

		let ruleForm = reactive({
			username: "",
			password: "",
		});

		let rules = reactive({
			username: [
				{
					required: true,
					message: "请输入正确的用户名",
					trigger: "blur",
				},
			],
			password: [
				{
					required: true,
					message: "请输入正确的密码",
					trigger: "blur",
				},
			],
		});

		let ruleFormRef = ref(null);

		let router = useRouter();

		let handleSubmit = (formEl) => {
			localStorage.clear();
			sessionStorage.clear();
			formEl.validate((valid) => {
				if (valid) {
					login(); //login
				} else {
					return false;
				}
			});
		};

		/*登录*/
		let login = async () => {
			router.push("/file/index");
			// postData("/adminweb/sys/admin/login", {
			//   user_name: ruleForm.username,
			//   user_pwd: ruleForm.password,
			// })
			//     .then((res) => {
			//       if (res.code == 0) {
			//         let pers = res.datas.permissions;
			//         localStorage.setItem("username", res.datas.user_name);
			//         localStorage.setItem("token", res.datas.token);
			//         localStorage.setItem("permissions", JSON.stringify(pers));
			//         let password = Refresh.encrypt(ruleForm.password)
			//         localStorage.setItem("password", password);
			//         router.push("/expertmanage/expertlist"); //去首页
			//       } else if (res.code == -56004) {
			//         ElMessage({
			//           message: '密码有误，请重新输入！',
			//           type: 'error',
			//         })
			//       } else if (res.code == -56024) {
			//         ElMessage({
			//           message: '用户名有误，请重新输入！',
			//           type: 'error',
			//         })
			//       } else {
			//         ElMessage({
			//           message: res.code + "，" + res.msg,
			//           type: 'error',
			//         })
			//       }
			//     })
			//     .catch((res) => {
			//       this.$message.error("error");
			//     });
		};

		let loginChange = () => {
			data.title = "视频云平台登录";
		};

		return {
			...toRefs(data),
			ruleForm,
			rules,
			ruleFormRef,
			handleSubmit,
			login,
			loginChange,
		};
	},
	/*  created() {
      if (window.mysocket) {
        window.mysocket.close();
      }
      var that = this;
      document.onkeydown = function (e) {
        let key = window.event.keyCode;
        if (key == 13) {
          that.handleSubmit();
        }
      };
    },*/
};
</script>

<style scoped>
html,
body {
	width: 100%;
	height: 100%;
}
.login-container {
	width: 100%;
	height: 100vh;
	background: url("./../../assets/img/loginBg.jpg") no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
.wrap {
	width: 54%;
	height: 496px;
	border-radius: 10px;
	margin: 0 auto;
	margin-top: 10%;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	overflow: hidden;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.left {
	width: 45%;
	height: 470px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.left img {
	width: 80%;
	height: 80%;
}
.right {
	flex: 1;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	padding-top: 20px;
}
.logo {
	width: 120px;
	height: 50px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 20px;
}
.logo img {
	width: 100%;
	height: 100%;
	display: inline;
	text-align: center;
}
.login-page {
	-webkit-border-radius: 5px;
	border-radius: 5px;
	width: 350px;
	height: 100%;
}
.title {
	margin-bottom: 43px;
	text-align: center;
	font-size: 29px;
}
</style>
